<!DOCTYPE html>
<html lang="en">
  <head>
    <title>saybook</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
  <link rel="stylesheet" href="css/animate.css">
  
  <link rel="stylesheet" href="css/style.css">
  </head>
  <body  style="background-color: #E9FAFF;">

<div id="app">
 <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light scrolled awake" id="ftco-navbar">
    <div class="container">
      <a class="navbar-brand" href="index.html">dirEngine.</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="oi oi-menu"></span> Menu
      </button>

      <div class="collapse navbar-collapse"  id="ftco-nav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active"><a href="index.html" class="nav-link">主页</a></li>
          <li class="nav-item"><a href="tour.html" class="nav-link">全部小说</a></li>
        </ul>
      </div>
    </div>
  </nav>
 


    <section class="ftco-section ftco-degree-bg">
      <div class="container">
		  <div class="row" >
			<div class="col-md-2" v-for="chapter in chapterList ">
				<a style="cursor: pointer;color: #007BFF;" @click="chapterContent(chapter.id)">{{chapter.chapter}}</a>
			</div>
		 </div>
      </div>
    </section> <!-- .section -->
</div>    
 
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery-migrate-3.0.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/jquery.waypoints.min.js"></script>
  <script src="js/jquery.stellar.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/aos.js"></script>
  <script src="js/jquery.animateNumber.min.js"></script>
  <script src="js/bootstrap-datepicker.js"></script>
  <script src="js/scrollax.min.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/axios.js"></script>
		<script src="js/getParam.js"></script>
  </body>

  
  <script type="text/javascript">
  	new Vue({
		el:"#app",
		data(){
			return {
				bookId:'',
				chapterList:[],
				book:{}
			}
		},
		created(){
			let bookId = getUrlParam("bookId");		
			this.bookId = bookId
			axios.get("http://43.226.146.149:8081/book/findChapterList/"+this.bookId).then(res=>{
				this.chapterList = res.data.chapterList;
				this.book = res.data.book
				$("title").html(this.book.bookName)
			})
		},
		methods:{
			chapterContent(id){
				window.location.href="content.html?chapterId="+id
			}
		}
	})
  </script>
</html>